import Taro, { Component } from '@tarojs/taro'
import { View,Picker,Image} from '@tarojs/components'
import './findDoctor.css'
import {AtButton,AtSearchBar } from "taro-ui"
import xia from '../../img/xia.png'
import star from '../../img/star2.png'
import app from '../../main';


export default class FindDoctor extends Component {

    config = {
        navigationBarTitleText: '搜索'
    }

    constructor () { 
        super(...arguments); 
        this.state = {
            keyword:this.$router.params.keyword,
            sort:2,
            city:'',
            positional_title:'',
            province:'',
            grade:'',
            value: this.$router.params.keyword,
            textA:'font-size: 18px ; color:black' ,
            textB:'font-size: 15px ; color:#6d6d6d;' ,
            textC:'font-size: 15px ; color:#00cc99;' ,
            iconA:'width: 50px; height: 50px;',
            iconB:'width: 20px; height: 20px;',
            citySel:'全部城市',
            recommendSel:['综合评分优先','智能推荐','平均响应时间'],
            recommendSeleter:'智能推荐',
            screenSel:['1','2','3','4','5','6'],
            screenSeleter:'筛选',
            arr:[],//医生数据
            boolean:['display:block','display:none'],
            tag:[],
            tags:[],
            dengji:['不限','三甲','二甲'],
            zhicheng:['不限','主任医师','副主任医师','主治医师','助理医师'],
            isShow:true,
            isHas:false
        }
    }

    onChange (value) {
        let me = this;
        this.setState({
            value: value,
            keyword:value
        },()=>{
            if(value == ''){
                me.getData();
            }
        })
    }

    onActionClick () {
        let me = this
        this.setState({
            keyword:this.state.value
        },()=>{
            me.getData();
        })
    }

    onRecommendChange = e =>{
        let me = this
        let num = parseInt(e.detail.value) + 1
        console.log(e)
        this.setState({
            sort:num,
            recommendSeleter:this.state.recommendSel[e.detail.value]
        },()=>{
            console.log('sort',num)
            me.getData();
        })
    }

    onCityChange = e => {
        let me = this;
        let province = e.detail.value[0]
        let city = e.detail.value[1]
        console.log(e)
        this.setState({
            citySel: e.detail.value[1],
            province:province,
            city: city,
        },()=>{
            me.getData();
        })
    }

    //筛选按钮
    gotoScreen(){
        this.setState({
            isShow:true
        })
        if(this.state.boolean[0]=='display:block'){
            this.setState({
                boolean:['display:none','display:block']
            })
        }else{
            let arr = []
            for(let i=0; i<this.state.dengji.length; i++){
                arr.push('color:#6d6d6d;border:1px solid #cccccc;')
            }
            let brr = []
            for(let i=0; i<this.state.zhicheng.length; i++){
                brr.push('color:#6d6d6d;border:1px solid #cccccc;')
            }
            console.log(5555)
            this.setState({
                boolean:['display:block','display:none'],
                tag:arr,
                tags:brr
            })
        }
    }

    //确认按钮
    onConfirmChange(){
        let me = this
        let screenSeleter = '' 
        if(me.state.grade == '' && me.state.positional_title == ''){
            screenSeleter = '筛选'
        }else{
            screenSeleter = me.state.grade + '  ' + me.state.positional_title
        }
        me.setState({ 
            screenSeleter:screenSeleter,
            boolean:['display:block','display:none']
        })
         me.getData();
    }

    //点击医生列表跳转到医生详情
    gotoDoctorindex(id){
        console.log(id)
        app.navigateTo('../doctorindex/doctorindex?id='+ id)
    }

    //点击医院等级标签
    onSelectChange (item,index) {
        console.log(item)
        console.log(index)
        let me = this
        let arr = []
        for(let i=0; i<this.state.dengji.length; i++){
            arr.push('color:#6d6d6d;border:1px solid #cccccc;')
        }
        arr.splice(index,1,'')
        console.log('arr',arr)
        if(index != 0){
            me.setState({
                tag:arr,
                grade:item,
            })
        }
        else{
            me.setState({
                tag:arr,
                grade:'',
            })
        } 
    }

    //点击医生职称标签
    onTagChange (item,index) {
        console.log(item)
        console.log(index)
        let me = this
        let brr = []
        for(let i=0; i<this.state.zhicheng.length; i++){
            brr.push('color:#6d6d6d;border:1px solid #cccccc;')
        }
        brr.splice(index,1,'')
        if(index != 0){
            me.setState({
                tags:brr,
                positional_title:item,
            })
        }else{
            me.setState({
                tags:brr,
                positional_title:'',
            })
        }
        
    }

    //重置按钮
    onResetChange () {
        let arr = []
        for(let i=0; i<this.state.dengji.length; i++){
            arr.push('color:#6d6d6d;border:1px solid #cccccc;')
        }
        let brr = []
        for(let i=0; i<this.state.zhicheng.length; i++){
            brr.push('color:#6d6d6d;border:1px solid #cccccc;')
        }
        this.setState({
            positional_title:'',
            grade:'', 
            tag:arr,
            tags:brr,
            screenSeleter:'筛选'
        })
    }

    offset = 0;
    length = 20;
    total = '';
    isFinlsh = false;

    //上拉加载
    onReachBottom() {
        if ((this.offset + this.length) < this.total) {
            app.toast('正在加载中...');
        } else {
            app.toast('没有更多数据了');
        }
        if (!this.isFinish) {
            this.length = this.length +20
            this.getData(); 
        }
    }

    //医生数据获取 
    getData(){
        　   console.log('this.$router.params',this.$router.params.hospital,this.$router.params.name)
            let me = this
            let keyword = this.state.keyword
            if(keyword == undefined){
                keyword = ''
            }
            console.log('a',this.state.province,this.state.city)
            let data = {
                offset:this.offset,
                length:this.length,
                search_value:keyword,
                sort:this.state.sort,
                province:this.state.province,
                city:this.state.city,
                grade:this.state.grade,
                positional_title:this.state.positional_title
            }
            // console.log(data)
            app.post('web/members/doctorList',data,function(res){
                console.log('res',res)
                if(res.data.result.list.length == 0){
                   console.log(1)
                   me.setState({
                     isShow:false
                   })
                }else{
                    me.total = res.data.result.total
                    if (me.state.sort!='2'&&me.state.isHas) {
                        me.setState({
                            isShow:true,
                            arr:res.data.result.list
                        },()=>{console.log(me.state.arr)})
                        return
                    }
                    if (!me.$router.params.hospital&&!me.$router.params.name) {
                        me.setState({
                            isShow:true,
                            arr:res.data.result.list
                        },()=>{console.log(me.state.arr)})
                        return
                    }
                    if (me.$router.params.hospital&&me.$router.params.name) {
                        let routerDataArr = res.data.result.list
                        routerDataArr.map((item,index)=>{
                            if ((item.hospital == me.$router.params.hospital)&&(item.name == me.$router.params.name)) {
                                routerDataArr.splice(index,1)
                                routerDataArr.unshift(item)
                            }
                            else if (item.hospital == me.$router.params.hospital) {
                                routerDataArr.splice(index,1)
                                routerDataArr.unshift(item)
                            }
                        })
                        me.setState({
                            isShow:true,
                            arr:routerDataArr
                        },()=>{console.log(me.state.arr)})
                    }
                    else if(me.$router.params.hospital&&!me.$router.params.name){
                        let routerDataArr = res.data.result.list
                        routerDataArr.map((item,index)=>{
                            if (item.hospital == me.$router.params.hospital) {
                                routerDataArr.splice(index,1)
                                routerDataArr.unshift(item)
                            }
                        })
                        me.setState({
                            isShow:true,
                            arr:routerDataArr
                        },()=>{console.log(me.state.arr)})
                    }
                    else if(!me.$router.params.hospital&&me.$router.params.name){
                        let routerDataArr = res.data.result.list
                        routerDataArr.map((item,index)=>{
                            if (item.name == me.$router.params.name) {
                                routerDataArr.splice(index,1)
                                routerDataArr.unshift(item)
                            }
                        })
                        me.setState({
                            isShow:true,
                            arr:routerDataArr
                        },()=>{console.log(me.state.arr)})
                    }
                    me.setState({
                        isHas:true
                    })
                }
            })
    }

    //城市搜索点击取消
    onCityCancel () {
        console.log(6666666)
        this.setState({
            citySel:'全部城市',
            isShow:true,
            province:'',
            city:''
        },()=>{
            this.getData()
        })
    }

    componentDidMount(){
        this.getData();

        let arr = []
        for(let i=0; i<this.state.dengji.length; i++){
            arr.push('color:#6d6d6d;border:1px solid #cccccc;')
        }
        let brr = []
        for(let i=0; i<this.state.zhicheng.length; i++){
            brr.push('color:#6d6d6d;border:1px solid #cccccc;')
        }
        this.setState({
            tag:arr,
            tags:brr
        })   
    }

  render () {

    let list1 = this.state.dengji.map((item,index)=>{
        return(
            <View onClick={this.onSelectChange.bind(this,item,index)} className='tagbox-inline'>
                <AtButton className='tagbox-tag' type='secondary' size='small' customStyle={this.state.tag[index]}>
                    <View className='tagbox-btnText'>{item}</View>
                </AtButton>
            </View>
        )
    })

    let list2 = this.state.zhicheng.map((item,index)=>{
        return (
            <View onClick={this.onTagChange.bind(this,item,index)} className='tagbox-inline'>
                <AtButton className='tagbox-tag' type='secondary' size='small' customStyle={this.state.tags[index]} >
                    <View className='tagbox-btnText'>{item}</View>
                </AtButton>
            </View>
        )
    })

    let doctorLists = this.state.arr.map((item)=>{
                            return(
                                <View class='information' onClick={this.gotoDoctorindex.bind(this,item.id)} style={this.state.boolean[0]}> 
                                    <View className='heng'>
                                        <Image className='head' src={app.getPath(item.head_image)} style={this.state.iconA}/>
                                        <View className='shu'>
                                            <View className='heng'>
                                                <View className='name' style={this.state.textA}>{item.name == '' || item.name == null ? '未知名字' : item.name}</View>
                                                <View className='doctor' style={this.state.textB}>{item.positional_title == '' || item.positional_title == null ? '未知科室' : item.positional_title }</View>
                                                <View className='starNum' style={this.state.textC}>{item.general_score}</View>
                                                <Image className='star' src={star} style={this.state.iconB}></Image> 
                                            </View>

                                            <View className='hospital' style={this.state.textB}>{item.hospital == '' || item.hospital == null ? '未知医院' : item.hospital}</View>

                                        </View>

                                    </View>

                                    {
                                        item.speciality == null ? '' : <View className='habbit' style={this.state.textB}>擅长：{item.speciality}</View>
                                    }

                                    <View className='tag-list'>
                                        {
                                            item.labels[0] == null || item.labels[0] == undefined || item.labels[0] == ''
                                            ?
                                            null
                                            :
                                            <AtButton className='tag-a'  size='small' circle  >{item.labels[0]}</AtButton>
                                        }
                                        {
                                            item.labels[1] == null || item.labels[1] == undefined || item.labels[1] == ''
                                            ?
                                            null
                                            :
                                            <AtButton className='tag-b'  size='small' circle  >{item.labels[1]}</AtButton>
                                        }
                                        {
                                            item.labels[2] == null || item.labels[2] == undefined || item.labels[2] == ''
                                            ?
                                            null
                                            :
                                            <AtButton className='tag-c'  size='small' circle  >{item.labels[2]}</AtButton>
                                        }
                                    </View>
                                </View>
                            )
                      })

    let nofound
    if(this.state.isShow) {
        nofound = <View className='foundText' style='display:none'><Text>筛选内容为空!</Text></View>
    }else{
        nofound = <View className='foundText' style='display:block'><Text>筛选内容为空!</Text></View>
    }

    return (
      <View className='index'>

       <View className='inputBox'>
            <AtSearchBar
                className='searchInput'
                actionName='搜索'
                value={this.state.value}
                onChange={this.onChange.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
            />        
        </View>

        <View className='selectBox'>
            
            <View className='box'>
                <View className='picker'>
                    <Picker mode='region' onChange={this.onCityChange} onCancel={this.onCityCancel.bind(this)}>
                        {this.state.citySel}
                    </Picker>
                </View> 
                <Image className='img' src={xia}/>
            </View>

            <View className='box'>
                <View className='picker'>
                    <Picker mode='selector' range={this.state.recommendSel} onChange={this.onRecommendChange} >
                        {this.state.recommendSeleter}
                    </Picker>
                </View>
                <Image className='img'src={xia}/>
            </View>
            
            <View className='box' onClick={this.gotoScreen.bind(this)}>
                <View className='picker'>
                        {this.state.screenSeleter}
                </View>
                <Image className='img'src={xia}/>
            </View>
        </View>
        {/* 下面为医生数据 */}
        <View className='emptyBox'></View>
		{this.state.isShow ? doctorLists : nofound}

		<View style={this.state.boolean[1]} className='abox'>
			<View className='tagbox'>
				<View className='tagbox-text'>医院等级</View>
				<View className='tagbox-btnBox'>
                {list1}
				</View>
			</View>

			<View className='tagbox'>
				<View className='tagbox-text'>医生职称</View>
				<View className='tagbox-btnBox'>
                {list2}
				</View>
			</View>

            <View className='btnCtro'>
                <AtButton  className='btnCtro-leftBtn' onClick={this.onResetChange.bind(this)}>重置</AtButton>
                <AtButton  className='btnCtro-rgihtBtn' type='primary' onClick={this.onConfirmChange.bind(this)}>确定</AtButton>
            </View>
		</View>
		
      </View>
    )
  }
}
